<template>
  <div class="container">
    <div class="roleBox">
      <div class="title">角色基本信息</div>
    </div>
    <div class="authorityBox">
      <div class="title">角色权限：</div>
      <el-tree
        ref="dept"
        class="tree-border"
        :data="deptOptions"
        show-checkbox
        node-key="id"
        empty-text="加载中，请稍候"
        :props="{ value: 'id', label: 'menuName', children: 'menuList' }"
        @check-change="handleCheckChange"
      />

      <div class="bottom">
        <el-button @click="SaveRoleJurisdiction">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { roleDetail, updateRoleMenu } from "@/api/systemManagement";

export default {
  name: "AuthorityDistribution",
  data() {
    return {
      titleName: "分配权限",
      roleId: "",
      deptOptions: [],
      defaultProps: {},
      checkedList: [],
    };
  },
  created() {
    this.roleId = this.$route.query.roleId;

    this.AssignRolePermission();
  },
  methods: {
    async AssignRolePermission() {
      const res = await roleDetail({ id: this.roleId });
      this.deptOptions = res.data;

      this.$nextTick(() => {
        const checkedKeys = this.getCheckedKeys(this.deptOptions);
        this.$refs.dept.setCheckedKeys(checkedKeys); // 关键修改
      });
    },
    // 递归收集 status 为 true 的节点 key
    getCheckedKeys(treeData) {
      const checkedKeys = [];
      const traverse = (nodes) => {
        nodes.forEach((node) => {
          if (node.status == 1) {
            if (
              !this.$refs.dept.getNode(node) ||
              !this.$refs.dept.getNode(node).childNodes ||
              !this.$refs.dept.getNode(node).childNodes.length
            ) {
              checkedKeys.push(node.id);
            }

          }
          if (node.menuList) {
            traverse(node.menuList);
          }
        });
      };
      traverse(treeData);
      return checkedKeys;
    },
    handleCheckChange() {
      const first = this.$refs.dept.getCheckedNodes();
      const second = this.$refs.dept.getHalfCheckedNodes();

      const res = [...first, ...second];
      this.checkedList = res.map((item) => {
        return {
          id: item.id,
        };
      });
    },
    async SaveRoleJurisdiction() {
      this.openLoading();
      const data = {
        id: this.roleId,
        menuList: this.checkedList,
      };
      const res = await updateRoleMenu(data);
      if (res.code==0) {
        this.$router.push({ path: '/roleManagement' })
        this.$message.success(res.msg)
      } else {
        this.$message.error(res.msg)
      }
      this.openLoading().close();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8fafc;
  padding: 10px;
  .greenColor {
    background-color: #dbf8dd;
    color: #0077FF;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
    padding: 0 10px;
  }
  .redColor {
    background-color: #f7e9ea;
    color: #e11d48;
    width: 80px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin: 0 auto;
    border-radius: 25px;
    padding: 0 10px;
  }
  .roleBox {
    background-color: #fff;
    padding: 20px 20px;
    color: #1c1c1c;
    margin-bottom: 1px;
    .title {
      margin-bottom: 20px;
      font-size: 18px;
    }
    .gray {
      color: #999999;
    }
    .first {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
    }
    .symbol {
      display: flex;
      align-items: center;
      margin-right: 100px;
    }
    .second {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0;
    }
    .third {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      .name {
        margin: 0 auto;
        .longDiv {
          background-color: #e8e6ff;
          color: #1900ff;
          width: 1000px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 30px;
        }
      }
    }
  }
  .authorityBox {
    background-color: #fff;
    padding: 20px 20px;
    color: #1c1c1c;
    .bottom {
      text-align: center;
      .el-button {
        margin: 0 auto;
        width: 800px;
        height: 35px;
        background-color: #0077FF;
        text-align: center;

        border-radius: 5px;
        color: #fff;
        margin-top: 20px;
      }
    }
    .title {
      margin-bottom: 20px;
    }

    ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #0077FF !important;
      border: none;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
    ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
      top: 7px;
    }
    ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #0077FF !important;
      border: none;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
    }
    ::v-deep .el-checkbox__inner::after {
      top: 3px;
      left: 8px;
      width: 4px;
      height: 10px !important;
    }

    ::v-deep .el-checkbox__inner {
      width: 20px;
      height: 20px;
    }

    ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
      padding: 10px;
    }

    ::v-deep.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
      top: 10px;
    }
    ::v-deep .el-tree-node__content {
      background-color: #F9FAFB !important;
      margin-top: 10px;
      height: 40px;
    }

    ::v-deep.el-tree-node__label {
      font-size: 18px !important;
    }

    ::v-deep.el-tree-node__children {
      background-color: #f5f9ff !important;
      margin-bottom: 10px;
    }

    .top {
      background-color: #e9ecef;
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>
